<script setup>
import { reactive, ref } from 'vue';

  // ref 也用于创建响应式数据的函数，ref 功能更强大些，支持 基本类型 和 引用类型(对象，数组)
  // ref 函数返回的是一个 响应式数据 <对象>，对象中有 value 属性，用来 获取/ 修改 响应式数据的值
  const totalCount = ref(100)

  const totalCount2 = reactive(1000)

  console.log(totalCount2);


  const addCount = () => {
    // console.log(totalCount)
    totalCount.value = totalCount.value + 10
  }
</script>

<template>
  <!-- 结构, template 中会自动解包，所以无需写 .value   -->
  <h1>{{ totalCount }}</h1>
  <button @click="totalCount++">点击+1</button>
  <button @click="totalCount = totalCount + 10">点击+10</button>
  <button @click="addCount()">点击调用函数</button>
</template>

<style scoped>
  /* 样式 */
</style>
